<%= content_tag :div,
  data: {
    target: "tab-group",
    index: index,
    controller: "tabs",
    tabs_view_value: view,
    tabs_group_id_value: group.id,
    tabs_active_tab_value: active_tab_name,
    tabs_resource_name_value: resource.underscore_name
  } do %>
  <% visible_tabs.each_with_index do |tab, index| %>
    <%= content_tag :div, **args(tab) do %>
      <%= render Avo::PanelHeaderComponent.new name: group.title, description: group.description %>
      <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-3 space-y-4">
        <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: visible_tabs.first, group: group, active_tab_name: tab.name, view: view %>
        <% if !tab.is_empty? %>
          <% if tab.lazy_load && view.display? %>
            <%= turbo_frame_tag tab.turbo_frame_id(parent: @group), **frame_args(tab) do %>
              <% if is_not_loaded?(tab) %>
                <%= render Avo::LoadingComponent.new(title: tab.name) %>
              <% else %>
                <%= render Avo::TabContentComponent.new tab:, resource:, index:, form:, view:%>
              <% end %>
            <% end %>
          <% else %>
            <%= render Avo::TabContentComponent.new tab:, resource:, index:, form:, view:%>
          <% end %>
        <% end %>
      </div>
    <% end %>
  <% end %>
<% end %>
